<template>
  <div class="w-748px h-131px bg-mask-shallow-white-2 flex items-center px-14px">
    <div
      v-for="(item, index) in data"
      :key="item.id"
      class="coupon-wrapper flex flex-col items-center w-125px h-103px"
      :class="{ 'ml-23px': index !== 0 }"
    >
      <div class="font-bold color-coupon tracking-wider text-36px mt-9px relative">
        {{ item.price }}
        <div class="absolute text-12px color-coupon -left-12px top-1px">{{ item.label }}</div>
      </div>
      <div class="text-14px color-coupon tracking-wider leading-21px">{{ item.content }}</div>
      <div class="text-10px tracking-wider color-coupon mt-9px cursor-pointer" @click="getCoupon">
        立即领取
      </div>
    </div>
    <div class="flex flex-col items-center ml-21px">
      <div
        class="flex items-center bg-coupon rounded-26px w-116px h-36px cursor-pointer"
        @click="gocoupon"
      >
        <div class="font-medium text-18px tracking-wider text-white ml-11px">领券中心</div>
        <img :src="NextCouponIcon" class="ml-8px" alt="" />
      </div>
      <div class="text-white mt-8px text-14px tracking-wider">更多好券</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import NextCouponIcon from '@renderer/assets/nextCoupon.svg'
import { useRouter } from 'vue-router'
const router = useRouter()
const data = ref<any>([
  {
    price: '50',
    content: '满200元使用',
    id: 1,
    label: '减'
  },
  {
    price: '70',
    content: '充值100',
    id: 1,
    label: '送'
  },
  {
    price: '5',
    content: '商品折扣',
    id: 1,
    label: '折'
  },
  {
    price: '5',
    content: '商品抵扣',
    id: 1,
    label: '抵'
  }
])

const getCoupon = () => {
  router.replace({ name: 'Coupon' })
}

const gocoupon = () => {
  router.replace({ name: 'Coupon' })
}
</script>

<style scoped>
.coupon-wrapper {
  background: url('@renderer/assets/coupon.svg');
}
</style>
